<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Pan</title>
    <script src="../js/hammer.js"></script>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        .test {
            width: 100%;
            height: 50%;
            background: #ffd800;
            text-align: left;
        }

        .result {
            width: 100%;
            height: 50%;
            background: #b6ff00;
            text-align: left;
        }
    </style>
</head>
<body>
<div id="test" class="test">事件区域</div>
<div id="result" class="result">事件结果<br /></div>
<script type="text/javascript">
    //创建一个新的hammer对象并且在初始化时指定要处理的dom元素
    var hammertime = new Hammer(document.getElementById("test"));
    var pan = new Hammer.Pan({pointers:0});
    hammertime.add(pan);
    // hammertime.add(Hammer.Pan({pointers:1})
    //添加事件
    hammertime.on("pan", function (e) {
        document.getElementById("result").innerHTML = "cnt=" + e.pointers.length + ", X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />"
            + document.getElementById("result").innerHTML;
        //控制台输出
        console.log(e);
    });
</script>
</body>
</html>